<template>
	<view class="content" :style="{
      'padding-top': height + 'px',
    }">
		<view :style="{
        height: statusBarHeight + 'px',
      }">
		</view>
		<view class="head" :style="{
        top: statusBarHeight + 'px',
      }">
			<view class="head_left">
				<u-icon name="arrow-left" color="#FFFFFF" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">我的下载</view>
			<view class="head_right" @click="guanli"> 
			<text v-if="is_check_box" class="wancheng">完成</text>
			<text v-else class="guanli">管理</text>
			</view>
		</view>
		<view class="tabs_box">
			<u-tabs class="tabs" :list="list1" @click="tabClick" :activeStyle="{
          color: '#eee',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          'font-size': '34rpx',
          paddingLeft: '12rpx',
          paddingRight: '12rpx',
        }" lineColor="#eee" :inactiveStyle="{
          color: '#ADADAD',
          transform: 'scale(1)',
          'font-size': '34rpx',
          paddingLeft: '12rpx',
          paddingRight: '12rpx',
        }" :scrollable="false" lineWidth="72rpx" lineHeight="4rpx"></u-tabs>
		</view>
		<scroll-view :style="{
        height: scrollHeihgt + 'px',
      }" :scroll-y="true" @scroll="scroll">
			<template>
				<view class="downloaded" v-if="current == 0">
					<view class="downloaded_item" v-for="(item, index) in list">
						<view class="check-box" @click="handCheck(item)" v-show="is_check_box">
							<image src="@/static/images/my/icon_grzy_xc_xuanzhong.png" mode="" v-if="item.check"></image>
							<image src="@/static/images/my/icon_grzy_quanxuan.png" mode="" v-else></image>
						</view>
						<view class="item_left" @click="goPreview(item)">
							<image :src="item.url" mode=""></image>
						</view>
						<view class="item_right">
							<view class="right_top">
								{{ item.name }}
							</view>
							<view class="right_center" :style="{
                  background: liveList[item.live_id - 1].bgColor,
                  color: liveList[item.live_id - 1].color,
                }">
								{{ liveList[item.live_id - 1].text }}
							</view>
							<view class="right_bom">
								{{ item.fileSize }}
							</view>
						</view>
					</view>
					<view class="empty_view" v-if="list && list.length == 0">
						<image class="item_left_clickable" src="../../static/images/my/kong.png" mode=""></image>
						<view>当前没有相关数据，请查看其他分类或功能~</view>
					</view>
				</view>

				<view class="downloaded" v-if="current == 1">
					<view class="Downloading_btn">
						<view class="Downloading_btn1"> 全部开始 </view>
						<!-- <view class="Downloading_btn1"> 全部暂停 </view> -->
						<view class="Downloading_btn1" @click="removeAll"> 全部移除 </view>
					</view>
					<view class="downloaded_item" v-for="(item, index) in listLoading">
						<view class="item_left">
							<image src="../../static/weichuang/pic_yonghuzhuye_jiu_yi.png" mode=""></image>
						</view>
						<view class="item_right">
							<view class="right_top">
								{{ item.name }}
							</view>
							<view class="Downloading_center">
								<u-line-progress height="6rpx" :percentage="item.progress" :showText="false"
									activeColor="#55B877"></u-line-progress>
							</view>
							<view class="Downloading_bom">
								<!-- {{item.fileSize}} -->
								下载中{{ item.size }}/{{ item.totalSize }}
								<view class="bom_btn">
									<!-- <view class="btn_text" @click="startDownload(item, index)">
										暂停
									</view> -->
									<view class="btn_text" @click="handRemove(item)"> 移除 </view>
								</view>
							</view>
						</view>
					</view>
					<view class="empty_view" v-if="listLoading && listLoading.length == 0">
						<image class="item_left_clickable" src="../../static/images/my/kong.png" mode=""></image>
						<view>当前没有相关数据，请查看其他分类或功能~</view>
					</view>
				</view>
			</template>
			<view class="" style="width: 100%;height: 132rpx;">
				
			</view>
			
		</scroll-view>
		<view class="bom_box" v-show="is_check_box">
			<view class="box_left" @click="all_check">
				<image src="@/static/images/my/icon_grzy_xc_xuanzhong.png" mode="" v-if="check_all"></image>
				<image src="@/static/images/my/icon_grzy_quanxuan.png" mode="" v-else></image>
				全选
			</view>
			<view class="box_right" @click="del">
				删除
			</view>
		</view>


		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import collect from "@/components/collect.vue"; // 收藏、
	import downs from "@/common/download.js";
	export default {
		components: {
			collect,
		},

		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				list: [{
						url: "../../static/weichuang/pic_yonghuzhuye_jiu_yi.png",
						name: "不同类型的地貌突出的不同特点",
						fileSize: "69.24MB",
						live_id: 2,
					},
					{
						url: "../../static/weichuang/pic_xz_yinpin.png",
						name: "不同类型的地貌突出的不同特点",
						fileSize: "69.24MB",
						live_id: 3,
					},
				],
				listLoading: [{
					url: "../../static/weichuang/pic_yonghuzhuye_jiu_yi.png",
					file: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
					name: "不同类型的地貌突出的不同特点",
					fileSize: "10.29MB",
					live_id: 2,
					progress: 0,
				}, ],
				liveList: [{
						live_id: 1,
						text: "图文",
						bgColor: "rgba(153, 187, 255, 0.302)",
						color: "#99BBFF",
					},
					{
						live_id: 2,
						text: "视频",
						bgColor: "rgba(201, 153, 255, 0.302)",
						color: "#C999FF",
					},
					{
						live_id: 3,
						text: "音频",
						bgColor: "rgba(255, 182, 94, 0.302)",
						color: "#FFB65E",
					},
				],
				list1: [{
						name: "已下载",
					},
					{
						name: "正在下载",
					},
				],
				scrollHeihgt: 0,
				current: 0,
				check_all:false,
				is_check_box:false
			};
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
			const windowHeihgt = statusBarHeight.windowHeight;
			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select(".head").fields({
					size: true,
				});
				query.select(".tabs_box").fields({
					size: true,
				});

				query.exec((data) => {
					let sum = 0;
					data.forEach((item) => {
						sum += item.height;
					});
					this.scrollHeihgt = windowHeihgt - sum;
				});
			});
		},
		onLoad(options) {
			if (options && options.url) {
				this.down(options.url, options.file_id, options.name, options.img);
			}
			let a = uni.getStorageSync("downloading_list");
			let b = uni.getStorageSync("downloaded");
			this.listLoading = a;
			this.list = b;
			console.log("aaabbb", a, b);
		},
		methods: {
			scroll(e) {
			},
			// 预览
			goPreview(item) {
				console.log(item, 1111111111);
				if (item.live_id == 1) {
					// 图片
					uni.navigateTo({
						url: `/components/preview?type=true&img=${item.url}`,
					});
				} else if (item.live_id == 2) {
					// 视频
					uni.navigateTo({
						url: `/components/preview?type=false&vimg=${item.file_url}`,
					});
				} else {
					// 音频
					uni.navigateTo({
						url: `/components/preview?type=false&vimg=${item.url}`,
					});
				}
			},
			down(file_url, id, name, img) {
				let that = this;
				const aBack = function() {
					//完成更新数据
					let a = uni.getStorageSync("downloading_list");
					let b = uni.getStorageSync("downloaded");
					that.listLoading = a;
					that.list = b;
				};
				let obj = {
					name: name,
					// file_url,
					url: img,
					live_id: 2,
					// id: Math.random(10000),
					id,
					check:false
				};
				console.log('objobjobj', obj);
				const tt = downs.getDown(
					file_url,
					obj,
					aBack
				);

				tt.onProgressUpdate((res) => {
					let arr6 = uni.getStorageSync("downloading_list");
					const index6 = arr6.findIndex((item, index) => {
						return item.id == obj.id;
					});
					arr6[index6].progress = res.progress;
					arr6[index6].downloadTask = tt;
					arr6[index6].totalSize = this.convertBytes(
						res.totalBytesExpectedToWrite
					);
					arr6[index6].size = this.convertBytes(res.totalBytesWritten);
					that.listLoading = arr6;
					console.log("ressss", res);
				});
			},
			convertBytes(bytes) {
				const kb = 1024;
				const mb = 1024 * 1024;

				if (bytes >= mb) {
					return (bytes / mb).toFixed(2) + " MB";
				} else if (bytes >= kb) {
					return (bytes / kb).toFixed(2) + " KB";
				} else {
					return bytes + " bytes";
				}
			},
			toBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			startDownload(item, index) {
				console.log("eeeee");
				this.listLoading[index].downloadTask.abort();

				// 			let downloadTask = uni.downloadFile({
				// 				url: 'https://image.yitian369.net/hxxq/%E6%99%B4%E6%80%80%E7%89%A9%E4%B8%9A%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D.mp4', //仅为示例，并非真实接口地址。

				// 				success(res) {
				// 					console.log('resssss',res);
				// 					if (res.statusCode == 200) {

				// 					}
				// 				}
				// 			});
				// 			downloadTask.onProgressUpdate((res) => {
				// 				console.log('resssss',res);
				// 				this.listLoading[index].progress = res.progress;
				// 			});
			},
			tabClick(e) {
				console.log("eeeee", e);
				this.current = e.index;

				let a = uni.getStorageSync("downloading_list");
				let b = uni.getStorageSync("downloaded");
				this.listLoading = a;
				this.list = b;
			},
			guanli() {
				this.is_check_box = !this.is_check_box;
			},
			handCheck(item) {
				item.check = !item.check;
				let all = true;
				this.list.forEach((val,index) => {
					if (!val.check) {
						all = false;
					}
 				})
				if (all) {
					this.check_all = true;
				} else {
					this.check_all = false;
				}
				console.log('itemitem',item);
			},
			all_check() {
				if (this.check_all) {
					this.list.forEach(item => {
						item.check = false;
					})
				} else {
					this.list.forEach(item => {
						item.check = true;
					})
				}
				this.check_all = !this.check_all;
			},
			removeAll() {
				this.listLoading = [];
				uni.setStorageSync("downloading_list",[]);
			},
			handRemove(item) {
				console.log('itemitemitme',item);
				const index = this.listLoading.findIndex((val) => {
					return item.id = item.id;
				})
				
				this.listLoading.splice(index,1);
				 uni.setStorageSync("downloading_list",this.listLoading);
			},
			del() {
				this.list.forEach((item) => {
					if (item.check) {
						uni.removeSavedFile({
						  filePath: item.file_url, //仅做示例用，非真正的文件路径
						  success: function (res) {
						   console.log('清除文件');
						  }
						});
					}
				})
				const filterList = this.list.filter((item) => {
					return !item.check
				})
				
				this.list  =  filterList;
				console.log('555555',filterList);
				uni.setStorageSync("downloaded",filterList);
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		box-sizing: border-box;
		background: url("/static/images/index.png") no-repeat;
		background-size: 100% 100%;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;

			.guanli {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #55b877;
			}
			.wancheng {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #eee;
			}
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.downloaded {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.downloaded_item {
			width: 100%;
			display: flex;
			margin-top: 32rpx;
			
			.check-box {
				padding-right: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.item_left {
				width: 180rpx;
				height: 180rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item_right {
				flex: 1;
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 8rpx 24rpx;
				box-sizing: border-box;

				.right_top {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #eeeeee;
				}

				.right_center {
					width: 68rpx;
					height: 36rpx;
					background: rgba(201, 153, 255, 0.302);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #c999ff;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.right_bom {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #adadad;
				}

				.Downloading_center {
					width: 100%;
				}

				.Downloading_bom {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #adadad;

					.bom_btn {
						display: flex;

						.btn_text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #eeeeee;
							margin-left: 24rpx;
						}
					}
				}
			}
		}

		.Downloading_btn {
			width: 100%;
			padding: 40rpx 30rpx 8rpx;
			box-sizing: border-box;
			display: flex;

			.Downloading_btn1 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #eeeeee;
				margin-right: 48rpx;
			}
		}
	}

	.empty_view {
		margin-top: 300rpx;

		image {
			margin: 0 auto;
			width: 410rpx;
			height: 410rpx;
		}

		view {
			font-size: 30rpx;
			color: #d8d8d8;
			text-align: center;
		}
	}
	.bom_box {
		width: 100%;
		height: 112rpx;
		background: #272727;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.box_left {
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #EEEEEE;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
		.box_right {
			width: 250rpx;
			height: 80rpx;
			background: #EE6060;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #EEEEEE;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>